<template>
	<el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157" text-color="#fff"
	 active-text-color="#ffd04b" :collapse="collapsed" :collapse-transition="bb">
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<el-submenu :key="n1.menuId" :index="n1.menuId+''" v-for="n1 in treeNodeList">
			<template slot="title">
				<!-- <img :src="n1.icon" /> -->
				<span>{{n1.name}}</span>
			</template>
			<!-- <el-menu-item :key="n2.menuId" :index="n2.url?n2.url:n2.menuId+''" v-for="n2 in n1.treeNodeList2">
				<template slot="title">
					<img :src="n2.icon" />
					<span>{{n2.name}}</span>
				</template>
			</el-menu-item> -->

			<el-menu-item v-if="n1.menuId===n2.parentId" v-for="n2 in treeNodeList2" :index="n2.url?n2.url:n2.menuId+''" :key="n2.menuId">
				<i v-if="n1.menuId===n2.parentId" :class="n2.icon"></i>
				<span v-if="n1.menuId===n2.parentId">{{n2.name}}</span>
			</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		name: 'LeftNav',
		data() {
			return {
				bb: true,
				collapsed: false,
				treeNodeList: [],
				treeNodeList2: []
			}
		},
		beforeCreate: function() {
			this.axios.post(this.axios.urls.SYS_Menu_LISTALL, {}).then((response) => {
				console.log("数据：", response);
				this.treeNodeList = response.data.result;
				this.treeNodeList2 = response.data.result2;
			});
		},
		created: function() {
			this.$root.Bus.$on('aside-collapsed', (collapsed) => {
				// console.log('LeftNav.vue,aside-toggle触发,collapsed=%s', collapsed)
				this.collapsed = collapsed
			})
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
</style>
